<template>
  <div>
    <el-cascader @change="typechange" :options="tags" v-model="type"></el-cascader>
    <el-table :data="notes" border style="width: 100%">
      <el-table-column prop="noteId" label="id"></el-table-column>
      <el-table-column label="标题">
        <template slot-scope="scope">
          <el-input @change="scope.row.changetit=true" v-model="scope.row.tittle"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="author.userid" label="作者"></el-table-column>
      <el-table-column label="标题颜色">
        <template slot-scope="scope">
          <el-color-picker @change="otherchange(scope.row,'color')" v-model="scope.row.tittleColor"></el-color-picker>
        </template>
      </el-table-column>
      <el-table-column label="置顶">
        <template slot-scope="scope">
          <el-checkbox @change="otherchange(scope.row,'top')" v-model="scope.row.top"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="精华">
        <template slot-scope="scope">
          <el-checkbox @change="otherchange(scope.row,'good')" v-model="scope.row.good"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="subminChange(scope.row)" type="text" size="small">修改标题</el-button>
          <el-button @click="editNote(scope.row)" type="text" size="small">修改内容</el-button>
          <el-button @click="delNote(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="seecomment(scope.row)" type="text" size="small">查看评论</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <div>
        <el-table :data="comment.comments">
          <el-table-column label="内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.html" type="textarea"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="author.userid" label="作者"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="updatecomment(scope.row)" size="small">修改</el-button>
              <el-button type="text" @click="delcomment(scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          background
          @current-change="pagecomment"
          :page-count="maxpage"
        ></el-pagination>
      </div>
    </el-dialog>
    <el-dialog title="编辑帖子" :visible.sync="editVisable">
      <el-input type="textarea" v-model="note"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisable = false">取 消</el-button>
        <el-button type="primary" @click="subminChangeCommit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import noteApi from "@/assets/api/note.js";
import adminApi from "@/assets/api/admin.js";
import typeApi from "@/assets/api/type.js";
export default {
  data() {
    return {
      noteid: null,
      dialogTableVisible: false,
      editVisable: false,
      type: [1, 1],
      tags: [],
      maxpage: null,
      notes: [],
      comment: {
        maxpage: null,
        comments: []
      },
      note: ""
    };
  },
  mounted() {
    this.load();
  },

  methods: {
    load() {
      typeApi.getType().then(res => {
        var list = res.data.tags;
        list.forEach(val => {
          var children = [];
          val.typeSends.forEach(val2 => {
            children.push({
              value: val2.typeId,
              label: val2.typeName
            });
          });
          this.tags.push({
            value: val.tagsId,
            label: val.tagsName,
            children: children
          });
        });
      });
      noteApi.page(this.type[1], 1).then(resp => {
        this.maxpage = resp.data.maxPage;
        this.notes = resp.data.data;
      });
    },
    typechange() {
      noteApi.page(this.type[1], 1).then(resp => {
        this.maxpage = resp.data.maxPage;
        this.notes = resp.data.data;
      });
    },
    seecomment(row) {
      var noteid = row.noteId;
      this.noteid = noteid;
      noteApi.comments(noteid, 1).then(res => {
        this.comment.comments = res.data.data;
      });
      this.dialogTableVisible = true;
    },
    page(page) {
      noteApi.page(this.type[1], page).then(resp => {
        this.maxpage = resp.data.maxPage;
        this.notes = resp.data.data;
      });
    },
    pagecomment(page) {
      noteApi.comments(this.noteid, page).then(res => {
        this.comment.comments = res.data.data;
      });
    },
    editNote(row) {
      noteApi.detialById(row.noteId).then(res => {
        this.note = res.data.data.text;
        this.noteid = row.noteId;
        this.editVisable = true;
      });
    },
    delNote(row) {
      adminApi.deleteNote(row.noteId).then(res => {
        if (res.data.success == 1) {
          this.$message({
            type: "success",
            message: "成功"
          });
          this.load();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    updatecomment(row) {
      adminApi.editComment(row.commentid, row.html).then(res => {
        if (res.data.success == 1) {
          this.$message({
            type: "success",
            message: "成功"
          });
          this.load();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    delcomment(row) {
      adminApi.deleteComment(row.commentid).then(res => {
        if (res.data.success == 1) {
          this.$message({
            type: "success",
            message: "成功"
          });
          this.load();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    subminChange(row) {
      adminApi.editNoteTitle(row.noteId, row.tittle).then(res => {
        if (res.data.success == 1) {
          this.$message({
            type: "success",
            message: "成功"
          });
          this.load();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    subminChangeCommit() {
      adminApi.editNoteText(this.noteid, this.note).then(res => {
        if (res.data.success == 1) {
          this.$message({
            type: "success",
            message: "成功"
          });
          this.load();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    otherchange(row, type) {
      if (type == "color") {
        adminApi.noteLight(row.noteId, row.tittleColor).then(res => {
          if (res.data.success == 1) {
            this.$message({
              type: "success",
              message: "成功"
            });
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else if (type == "top") {
        adminApi.noteTop(row.noteId, row.top).then(res => {
          if (res.data.success == 1) {
            this.$message({
              type: "success",
              message: "成功"
            });
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else if (type == "good") {
        adminApi.noteGood(row.noteId, row.good).then(res => {
          if (res.data.success == 1) {
            this.$message({
              type: "success",
              message: "成功"
            });
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    }
  }
};
</script>

<style>
</style>
